<template>
  <div class="major-container">
    <Headbar />
    <MarketHeadMenu :marketId="marketId"  />
    <Hungbar/>
    <Swiper :marketId="marketId"  />
    <Endorse  :marketId="marketId" />
    <div class="major-market-content yh-layout-box">
      <div class="major-market-left-con fl">
        <div class="major-market-hotItem bg-white">
          <div class="major-market-hot">
            <span class="hotMarket-head fl">市场热卖</span>
            <span class="changeBatch fr cursor" @click="ackProduct()">换一批</span>
          </div>
          <div class="major-marketPD-wrap">
            <div class="major-marketPD-ul">
              <div class="major-marketPD-li fl" v-for="(item,i) in productList.list">
                <a :href="URL.mall+'/product/'+ item.productId" target="_blank">
                  <img class="marketPD-img" :src="URL.PIC+item.productImg"/>
                </a>
                <p class="major-marketPD-title">
                  {{item.productTitle}}
                </p>
                <div class="marketPD-price">￥{{item.productPrice}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="major-market-floors">
          <div class="major-rollWrap">
            <RollWrap :marketId="marketId"  />
          </div>
        </div>
      </div>
      <div class="major-market-right-con fl">
<!--        <div class="hotSale-factory">-->
<!--          <div class="hotSale-factory-head">热销云工厂</div>-->
<!--          <div class="hotSale-factory-rank">-->
<!--            <div class="hotSale-factory-li cursor" v-for="(item,i) in 5">-->
<!--              <div class="hotSale-num fl">-->
<!--                <img src="@/assets/images/market/rank_01.png"/>-->
<!--                &lt;!&ndash; <img src="@/assets/images/market/rank_02.png"/> &ndash;&gt;-->
<!--                &lt;!&ndash; <img src="@/assets/images/market/rank_03.png"/> &ndash;&gt;-->
<!--                &lt;!&ndash; <span class="rank-num">4</span> &ndash;&gt;-->
<!--                &lt;!&ndash; <span class="rank-num">5</span> &ndash;&gt;-->
<!--              </div>-->
<!--              <div class="hotSale-company fl">-->
<!--                <img src="@/assets/images/market/rank_company.png"/>-->
<!--              </div>-->
<!--              <div class="hotSale-msg fl">-->
<!--                <p class="hotSale-msg-title">温州达尔捷机械制造公司</p>-->
<!--                <div class="hotSale-label">-->
<!--                  <span class="label-mark metals">五金</span>-->
<!--                  <span class="label-mark leather">皮料</span>-->
<!--                  <span class="label-mark fasteners">紧固件</span>-->
<!--                </div>-->
<!--                <div class="hotSale-address">-->
<!--                  <img src="@/assets/images/market/address.png"/>-->
<!--                  <span class="address-detail">A区.2002A档</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="latestEntry-factory">
          <div class="latestEntry-factory-head">最新入驻云工厂</div>
          <div class="latestEntry-factory-ul">
            <div class="latestEntry-factory-li cursor" v-for="(item,index) in factoryList.list" v-if="index < 5 ">
              <a :href="URL.mall+'/factory/'+ item.factoryId" target="_blank">
              <div class="latestEntry-company fl">
                  <img :src="URL.PIC+(item.logo==''?'/pic/user/avatar/avatar.png':item.logo)"/>
              </div>
              <div class="latestEntry-msg fl">
                <p class="latestEntry-msg-title">{{item.factoryName}}</p>
                <div class="latestEntry-address" :title="item.address">
                  <img src="@/assets/images/market/address.png"/>
                  <span class="address-detail">{{item.address}}</span>
                </div>
                <div class="latestEntry-time">
                  入驻时间：<span class="latestEntry-time-detail" v-html="fmtDate(item.publishTime,'ymd')"></span>
                </div>
              </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <Footbars /> 
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import MarketHeadMenu from './components/MarketHeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import Swiper from './components/Swiper'
import Endorse from './components/Endorse'
import RollWrap from './components/RollWrap'
import {searchProduct,factoryRecommend} from '@/api/market'

export default {
  name: 'Major',
  components: {
    Headbar,
    MarketHeadMenu,
    Hungbar,
    Footbars,
    Swiper,
    Endorse,
    RollWrap,

  },
  data() {
    return {
      marketId:this.getUrlParams('marketId'),
      productList:[],
      factoryList:[],
      listQuery:{
        marketIds:this.getUrlParams('marketId'),
        'sort.field':'publish_time',
        'sort.order':'DESC',
        'pageable.page':1,
        'pageable.size':8
      }
    }
  },
  created() {
    this.searchProduct();
    this.factoryRecommend();
  },
  methods: {
    searchProduct(){
      searchProduct(this.listQuery).then(res=>{
         this.productList = res.data;
      });
    },
    //换一批
    ackProduct(){
      let len = parseInt(this.productList.pageCount/8);
      if(this.productList.pageCount%8){
        len++;
      }
      if(len==this.listQuery["pageable.page"]){
        this.listQuery["pageable.page"] = 1;
      }else{
        this.listQuery["pageable.page"]= this.listQuery["pageable.page"]+1;
      }
      this.searchProduct();
    },
    // 最新入驻云工厂
    factoryRecommend(){
      factoryRecommend({marketIds:this.marketId}).then(res=>{
          this.factoryList = res.data;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/market.scss';
</style>
